<template>
	<view>
		<!-- 轮播图开始 -->
		<swiper style="height:410upx margin-top:5upx" class="square-dot" :circular="true" :indicator-dots="true">
			<swiper-item>
				<image mode="scaleToFill" class="swiperimg" src="../../static/lunbo/huangmenjimifan.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image mode="scaleToFill" class="swiperimg" src="../../static/lunbo/jituifan.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image mode="scaleToFill" class="swiperimg" src="../../static/lunbo/lamian.jpg"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图结束 -->
		<!-- 饭堂列表开始 -->
		<view style="margin-top: 30upx;">
			<view @tap="gopages(i)" style="padding: 30upx;" class="flex justify-around bg-white" v-for="(p,i) in TabLists" :key="i">
				<!-- 左边部分开始 -->
				<view style="width: 250upx; height: 250upx;">
					<image style="width: 250upx; height: 250upx;" :src="p.pic"></image>
				</view>
				<!-- 左边部分结束 -->
				<!-- 右边边部分开始 -->
				<view style="width: 400upx; border-bottom: 1upx solid #DDDDDD;" class="">
					<view style="font-weight: bold; font-size: 120%;">
					<text class="cu-tag sm bg-gradual-orange round">{{p.ct}}</text>
				     {{p.gg}}
					</view>
				</view>
				<!-- 右边部分结束 -->
			</view>
		</view>
		<!-- 饭堂列表结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				TabLists: [
				{
					ct:"鹏园" ,
					gg:"好吃，物美价廉",
					pic:"../../static/fantang/pengyuan.jpg",
					url:"../carteen/peng"
					},
				{
					ct:"泽园",
					gg:"实惠",
					pic:"../../static/fantang/zeyuan.jpg",
					url:"../carteen/ze"
					},
				{
					ct:"鸿园",
					gg:"种类多样，任君选择",
					pic:"../../static/fantang/hongyuan.jpg",
					url:"../carteen/hong"
					},
				],
				thistab: 0,
				types:[],
				goods:[],
				selected:0

			}
		},
		onLoad() {

		},
		methods: {
			qiehuan(index) {
				this.thistab = index;
			},

			gopages(item){
				var url=this.TabLists[item].url;
				if(url!=null && url!=undefined){
					uni.reLaunch({
						url:url
					});
				}
			},
			onLoad(){

			}
			

		}
	}
</script>

<style>
	.swiperimg {
		height: 400upx;
		width: 750upx;
	}
	.type-item{
		height: 50upx;
		text-align: center;
		line-height: 100upx;
		position: relative;
	}

</style>
